<template>
  <div style="padding-top: 15vh; background-color: #ffffff; position: absolute; top: 0px; bottom: 0px; right: 0; left: 0;">
    <!-- <div style="text-align: center; margin-bottom: 20px; color: #383838; font-weight: 600;">橙单后台管理系统</div> -->
    <div class="logo">
      <p>你好，</p>
      <p>欢迎来到橙单！</p>
    </div>
    <van-cell-group style="margin: 0 24px 9px 24px;" :border="false">
      <input class="input" type="text" v-model="formData.mobilePhone" />
      <div class="input" style="margin-top: 20px; padding: 0px; position: relative;">
        <input class="input" :type="passwordVisual?'text':'password'" v-model="formData.password" style="padding-right: 40px; " />
        <van-icon :name="passwordVisual?passwordInvisibleIcon:passwordVisualIcon"
          style="position: absolute; top: 10px; right: 10px;"
          @click="passwordVisual=!passwordVisual"
          size="24"
        />
      </div>
    </van-cell-group>
    <!--
    <van-checkbox v-model="RememberPassword"
      style="margin: 0 0 38px 27px;"
      shape="square"
      icon-size="16px"
      checked-color="#ff7700">
      记住密码
    </van-checkbox>
    -->
    <div class="forget-password">
      <span @click="openModifyPassword">修改密码</span>
    </div>
    <div style="margin: 3vh 24px 0px 24px;">
      <van-button style="background-color: #ff7700;border: none;border-radius: 4px;color: #ffffff;font-size: 16px;" type="primary" block @click="onLogin">登录</van-button>
      <p class="agree">登录即表明同意<span>《XXX用户协议》</span>和<span>《隐私协议》</span></p>
    </div>
    <img class="slogan-icon" src="../../assets/login/slogan-icon2x.png" alt="">
  </div>
</template>

<script>
// import Verify from '@/components/Verifition/Verify.vue';
import { encrypt, setToken } from '@/utils';
import { SystemController } from '@/api';
import accountIcon from '@/assets/login/account-icon2x.png';
import passwordIcon from '@/assets/login/password-icon2x.png';
import passwordVisualIcon from '@/assets/login/password-visual-icon2x.png';
import passwordInvisibleIcon from '@/assets/login/password-invisible-icon2x.png';

export default {
  name: 'login',
  props: {},
  components: {
  },
  data () {
    return {
      accountIcon: accountIcon,
      passwordIcon: passwordIcon,
      passwordVisualIcon: passwordVisualIcon,
      passwordInvisibleIcon: passwordInvisibleIcon,
      passwordVisual: false,
      RememberPassword: false,
      formData: {
        mobilePhone: undefined,
        password: undefined
      }
    }
  },
  created () {
    this.formData.mobilePhone = localStorage.getItem('userName') || 'admin'
    this.formData.password = localStorage.getItem('password') || '123456'
  },
  methods: {
    onLogin () {
      // this.$refs.verify.show();
      this.login();
    },
    login (verifyParams) {
      let params = {
        loginName: this.formData.mobilePhone,
        password: encrypt(this.formData.password),
        captchaVerification: (verifyParams || {}).captchaVerification
      };
      setToken(null);
      SystemController.loginMobile(this, params, null, {showMask: false}).then(data => {
        for (let item of data.data.mobileEntryList || []) {
          if (item.extraData != null && item.extraData !== '') {
            try {
              item.extraData = JSON.parse(item.extraData);
            } catch (e) {
              item.extraData = null;
            }
          } else {
            item.extraData = null;
          }
        }
        if (this.RememberPassword) {
          localStorage.setItem('userName', this.formData.mobilePhone)
          localStorage.setItem('password', this.formData.password)
        }
        this.$store.commit('setHomeEntryList', data.data.mobileEntryList)
        setToken(data.data.tokenData);
        this.$router.replace({ name: 'home' });
      }).catch(e => {
        console.log(e);
      });
    },
    onVerifySuccess (verifyParams) {
      this.login(verifyParams);
    },
    openModifyPassword () {
      this.$router.push({ name: 'password' });
    }
  }
};
</script>

<style scoped>
	.logo{
		width: 100%;
		margin: 0px 24px;
		margin-bottom: 7vh;
	}
	.logo p{
    height: 35px;
    line-height: 35px;
		font-size: 24px;
		color: #333333;
		font-weight: bold;
	}
	.inputs{
    height: 48px;
    border-bottom: 1px solid #f0efef;
    padding: 12px 2px;
  }
  .inp-left-icon{
    margin-right: 8px;
  }
	.slogan-icon{
		width: 60vw;
		height: auto;
		position: fixed;
		bottom: 6vh;
		right: calc((100% - 60vw) / 2);
	}
  .input {
    border: none;
    background: #FAFAFA;
    width: 100%;
    height: 44px;
    line-height: 44px;
    border-radius: 4px;
    padding: 0px 10px;
    box-sizing: border-box;
    font-size: 16px;
    color: #333333;
  }
  .agree {
    margin-top: 16px;
    color: #939393;
    font-size: 14px;
    text-align: center;
  }

  .agree span {
    color: #ff7700;
  }

  .forget-password {
    margin: 0 24px;
    margin-top: 16px;
    text-align: right;
  }
  
  .forget-password span {
    color: #939393;
    font-size: 14px;
    cursor: pointer;
    padding: 5px 0;
  }
  
  .forget-password span:active {
    text-decoration: underline;
  }
</style>

<style>
	/* vant 样式修改 这里不要用scoped*/
	.van-field__left-icon{
		display:flex;
		align-items: center;
		justify-content: center;
		margin-right: 10px;
	}
</style>
